import React, { } from 'react';
import DocumentTitle from 'react-document-title';

import { ProfileStyle } from './style';
import Header from './component/header/header.jsx'
import MyOrder from './component/myorder'
import { Modal, Toast } from 'antd-mobile';
import { unBindUni, bindOpenidUniApplet } from '@api'
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';


const alert = Modal.alert

let toolList = [
  {
    src: 'https://res.lexiangpingou.cn/images/826/2020/09/gmI33puUnznr3jj5ytmoF9JnrI5nZY.png',
    name: '我的账单'
  },
  {
    src: 'https://res.lexiangpingou.cn/images/826/2020/09/WfUNFNGbx77jq9fJm5xFRq5MpqZMpm.png',
    name: '我的地址'
  },
  {
    src: 'https://res.lexiangpingou.cn/images/826/2020/10/ZehHHwNweQnDQHhcGwWnGwWHNglgDG.png',
    name: '身份认证'
  },

  {
    src: 'https://res.lexiangpingou.cn/images/826/2020/12/iHd99fHhO9E9Ht9112X99fEEf9hzxU.png',
    name: '解绑账号'
  },
  {
    src: 'https://res.lexiangpingou.cn/images/vip/99984version.png',
    name: '更新版本'
  },
]

const Tool = (props) => {
  let history = useHistory()
  const { isApplet, uniacid, appletOpenid, userInfo, isBind, isYou } = props

  if (isBind) {

    if (isYou) {
      toolList[3].name = '解绑账号'
    } else {
      toolList.length > 4 && toolList.splice(3, 1)
    }

  } else {
    // 未绑定
    toolList[3].name = '绑定账号'
  }

  return (
    <div className="tool">
      <div className="container">
        <div className="tool-top">
          <span>常用工具</span>
        </div>
        <div className="tool-content">
          <ul>
            {
              toolList.map((item, key) => {
                return (
                  <li key={item.name + key} className="tool-item flex-column" onClick={e => { goTool(item) }}>
                    <img className="tool-img" src={item.src} alt="" />
                    <p className="tool-name">{item.name}</p>
                    { item.name === '更新版本' && <p style={{
                      position: "absolute",
                      marginTop: '.8rem',
                      color: '#474747',
                      opacity: '.3',
                      fontSize: '.29rem',
                      fontWeight: 500
                    }}> 1.2.6 </p>}
                  </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    </div>
  )

  function goTool(item) {

    switch (item.name) {
      case '我的账单':
        isApplet ? window.navigateToWebWiew('/myBill') : history.push('/myBill')
        break;
      case '我的地址':
        isApplet ? window.navigateToWebWiew('/myAddress/profile') : history.push('/myAddress/profile')
        break;
      case '身份认证':
        isApplet ? window.navigateToWebWiew('/authentication') : history.push('/authentication')
        break;
      case '更新版本':
        alert('确定清理缓存并更新吗？', '', [
          {
            text: '取消', onPress: () => {
            }
          },
          {
            text: '确认', onPress: () => {
              localStorage.clear()
              window.location.reload()
            }
          }
        ])
        break;
      case '解绑账号':
        alert('确定解除该账号与您的微信绑定吗？', '', [
          {
            text: '取消', onPress: () => {
            }
          },
          {
            text: '确定', onPress: () => {
              unBindUni(uniacid).then(res => {
                console.log(res)
                if (res.status === 200) {
                  Toast.info('解绑成功', 1)
                  window.location.reload()
                } else {
                  Toast.info(`解绑失败(${res.msg})`, 1)
                }
              })
            }
          }
        ])
        break;
      case '绑定账号':
        alert('确定将账号与您的微信绑定吗？', '', [
          {
            text: '取消', onPress: () => {
            }
          },
          {
            text: '确定', onPress: () => {
              bindOpenidUniApplet({ uniacid, appletOpenid, openid: userInfo?.openid }).then(res => {

                if (res) {
                  Toast.info('绑定成功', 1)
                  window.location.reload()
                } else {
                  Toast.info(`绑定失败(${res.msg})`, 1)
                }
              })
            }
          }
        ])
        break;

      default:
        break;
    }
  }

}

const Profile = props => {

  const appConfig = useSelector(state => state.appConfig)
  const history = useHistory()

  const orderList = [
    {
      src: 'https://res.lexiangpingou.cn/images/826/2020/09/w27l17T7Za360707b4006W0Ae07LA1.png',
      name: '待发货'
    },
    {
      src: 'https://res.lexiangpingou.cn/images/826/2020/09/Cze291JwBe1e3ee9A1t9EtA5t949q2.png',
      name: '待收货'
    },
    {
      src: 'https://res.lexiangpingou.cn/images/826/2020/09/I9hpFs96n5K9PnHj66jN50FvvS6hMm.png',
      name: '待评价'
    },
    {
      src: 'https://res.lexiangpingou.cn/images/826/2020/09/PVnKA50kF0R8an5rR5IN0i3F2RfzU8.png',
      name: '售后'
    }
  ]


  return (
    <>
      <DocumentTitle title={ '个人中心' } />
      <div style={{ backgroundColor: '#F5F5F5', height: '100%' }}>
        <ProfileStyle>
          <Header />
          <div style={{ margin: '.14rem .32rem' }} className="content">

            <div className="menu flex-row">
              <div className="purchase-needs item-common flex-row" onClick={e => { history.push('/purchaseOrder/0') }}>
                <img src="https://res.lexiangpingou.cn/images/826/2020/09/Ig1Eg77zcecwzZeaFHhcUh211gtzgj.png" alt="" />
                <div>
                  <p className="name">采购需求</p>
                  <p className="info">发布的采购需求订单</p>
                </div>
              </div>

              <div className="my-favorites item-common flex-row" onClick={e => { goFavorites(e) }}>
                <img src="https://res.lexiangpingou.cn/images/826/2020/09/nOt3e7O749QErP738ptE73S5E7G8Za.png" alt="" />
                <div>
                  <p className="name">我的收藏</p>
                  <p className="info">查看已收藏的商品</p>
                </div>
              </div>
            </div>
            <MyOrder orderList={orderList} />
            <Tool {...appConfig} />
          </div>
        </ProfileStyle>
      </div>
    </>
  )

  function goFavorites() {
    const { isApplet } = appConfig
    isApplet ? window.navigateToWebWiew('/myFavorites') : history.push('/myFavorites')
  }
}


export default Profile;